import React from 'react';
import {
    AppRegistry,
    StyleSheet,
    Text,
    View,
    processColor
} from 'react-native';

import {BarChart} from 'react-native-charts-wrapper';

class BarChartScreen extends React.Component {

    constructor() {
        super();

        this.state = {
            legend: {
                enabled: false,
                textSize: 14,
                form: 'SQUARE',
                formSize: 14,
                xEntrySpace: 10,
                yEntrySpace: 5,
                formToTextSpace: 5,
                wordWrapEnabled: true,
                maxSizePercent: 0.5
            },
            data: {
                dataSets: [{
                    values: [{y: 320.23}, {y: 231}, {y: 90}, {y: 70}],
                    label: '',
                    config: {
                        // color: processColor('teal'),
                        colors: [processColor('#F29400'), processColor('#0268AE'), processColor('#FFD500'), processColor('#DF4443')],
                        // barSpacePercent: 40,
                        // barShadowColor: processColor('lightgrey'),
                        // highlightAlpha: 70,
                        // highlightColor: processColor('red'),
                        entryLabelTextSize: 16,
                    }
                }],
            },
            xAxis: {
                valueFormatter: ['能量', '水', '电', '气'],
                labelCount:4,
                granularityEnabled: false,
                granularity: 1,
                position: 'BOTTOM',
                drawGridLines: false
            },
            yAxis: {
                right: {
                    drawLabels: false,
                    drawAxisLine: false,
                    drawGridLines: false,
                }
            },
            description: {
                text: '',
            }
        };
    }

    handleSelect(event) {
        let entry = event.nativeEvent;
        if (entry == null) {
            this.setState({...this.state, selectedEntry: null})
        } else {
            this.setState({...this.state, selectedEntry: JSON.stringify(entry)})
        }
    }


    render() {
        return (
            <View style={{flex: 1}}>

             <View style={{height:80}}>
                    <Text> selected entry</Text>
                    <Text> {this.state.selectedEntry}</Text>
                </View>
                <View style={styles.container}>
                    <BarChart
                        style={styles.chart}
                        data={this.state.data}
                        xAxis={this.state.xAxis}
                        yAxis={this.state.yAxis}
                        animation={{durationX: 2000, durationY: 2000}}
                        chartDescription={this.state.description}
                        legend={this.state.legend}
                        gridBackgroundColor={processColor('#ffffff')}
                        drawBarShadow={false}
                        drawValueAboveBar={true}
                        drawHighlightArrow={true}
                        doubleTapToZoomEnabled={false}
                        scaleEnabled={false}
                        onSelect={this.handleSelect.bind(this)}
                    />
                </View>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        //backgroundColor: '#F5FCFF'
    },
    chart: {
        width: 200,
        height: 200,
    }
});

export default BarChartScreen;
